<template>
  <div class="kjk">
    <a-typography-title :level="4" class="header">
      <img
        src="@/assets/left-s-line.png"
        class="left-s-line"
        @click="handleAvatarClick"
      />
      个人头像
      <van-uploader
        class="sjdkf"
        :after-read="afterRead"
        accept="image/*"
        :preview-image="false"
      >
        <a-typography-text @click="afterRead">编辑</a-typography-text>
      </van-uploader>
    </a-typography-title>
    <div class="avatar">
      <img :src="memberPicture" />
    </div>
  </div>
</template>
    
<script setup >
import { useRouter, useRoute } from 'vue-router'
import { commonUpload, putSystemMember } from '@/api/api'
import f123 from '@/assets/logo.png'
import { Toast } from 'vant'
import { useAppStore } from '@/store'
const appStore = useAppStore()
const router = useRouter()
const route = useRoute()
const memberPicture = ref('')
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const handleAvatarClick = () => {
  router.push({ path: '/userCenter' })
}
onBeforeMount(() => {
  memberPicture.value = userInfo?.memberPicture || ''
})
const afterRead = (file) => {
  var formData = new FormData()
  formData.append('file', file.file)
  commonUpload(formData).then((res) => {
    if (res.code == 200) {
      putSystemMember({
        id: route.query.id,
        memberPicture: res.url,
      }).then((res1) => {
        if (res1.code == 200) {
          memberPicture.value = res.url
          userInfo.memberPicture = res.url
        } else {
          Toast.fail(res1.msg) 
        }
      })
    } else {
      Toast.fail(res.msg)
    }
  })
}
</script>
    
<style scoped lang='less'>
.kjk {
  .header {
    text-align: center;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #ccc;

    .left-s-line {
      width: 20px;
      position: absolute;
      left: 10px;
      top: 15px;
    }
  }
  .sjdkf {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .avatar {
    width: 100%;
    height: calc(100% - 80px);
    padding: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>